﻿@page "/in-place-editor/overview"

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.InPlaceEditor
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the In-place Editor component. Click on the dotted input element to switch to the editable state and save or cancel it by clicking the actions buttons.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>In-place Editor</code> component is used to edit values in place and update them to the server.</p>
    <p><code>In-place Editor</code> modes can be switched by selecting the appropriate values provided in a drop-down. The applicable editor positions are as follows:</p>
    <p>
        <ul>
            <li>Inline</li>
            <li>Pop-up</li>
        </ul>
    </p>
    <p>
        The edit on modes of In-place editor can be switched by selecting the appropriate values provided in a drop-down. The applicable modes are as follows:
        <ul>
            <li>Click - Editor opens the edit input with single click of textbox.</li>
            <li>DblClick - Editor opens the edit input with double click of textbox.</li>
            <li>EditIconClick - Edit mode can be opened with the use of edit icon only which is visible on hover of textbox.</li>
        </ul>
    </p>
    <p>The Save and Cancel buttons of the <code>In-place Editor</code> component can be shown or hidden by switching the Show Button check box state. If the action buttons are hidden, then you can save the data by clicking outside the target or by pressing the Enter key. You can cancel the edit request by pressing the Esc key.</p>
    <p>More information on the <code>In-place Editor</code> instantiation can be found in the<a target="_blank" href="https://blazor.syncfusion.com/documentation/in-place-editor/getting-started/"> documentation section </a>.</p>
</ActionDescription>

<div class="row">
    <div class="col-lg-8 control-section inplace-control-section default_layout">
        <div class="control_wrapper">
            <table>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            TextBox
                        </label>
                    </td>
                    <td>
                        <SfInPlaceEditor @bind-Value="@TextValue" TValue="string" Mode="@Mode" EditableOn="@EditableOn" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Text" ShowButtons="@ShowButtons" Disabled="@Disabled"  SubmitOnEnter="true">
                            <EditorComponent>
                                <SfTextBox @bind-Value="@TextValue" Placeholder="Enter employee name"></SfTextBox>
                            </EditorComponent>
                        </SfInPlaceEditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            NumericTextBox
                        </label>
                    </td>
                    <td>
                        <SfInPlaceEditor  Mode="@Mode" EditableOn="@EditableOn" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Numeric" @bind-Value=@NumericValue ShowButtons="@ShowButtons" Disabled="@Disabled" TValue="double">
                            <EditorComponent>
                                <SfNumericTextBox TValue="double" @bind-Value=@NumericValue Format="c2" Placeholder="Currency format"></SfNumericTextBox>
                            </EditorComponent>
                        </SfInPlaceEditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            MaskedTextBox
                        </label>
                    </td>
                    <td>
                        <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.Mask" @bind-Value="@MaskValue" ShowButtons="@ShowButtons" Disabled="@Disabled" Mode="@Mode" EditableOn="@EditableOn" TValue="string">
                            <EditorComponent>
                                <SfMaskedTextBox Mask="000-000-0000" @bind-Value="@MaskValue"></SfMaskedTextBox>
                            </EditorComponent>
                        </SfInPlaceEditor>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tr>
                <td>
                    <div> Mode</div>
                </td>
                <td>
                    <div>
                        <SfDropDownList Width="90%" TValue="string" TItem="InplaceModes" DataSource="@ModeData" @bind-Value="@DropMode">
                            <DropDownListEvents TValue="string" TItem="InplaceModes" ValueChange="@ChangeEditMode"></DropDownListEvents>
                            <DropDownListFieldSettings Text="text" Value="value"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>Editable On</div>
                </td>
                <td>
                    <div>
                        <SfDropDownList Width="90%" TValue="string" TItem="InplaceEditableModes" DataSource="@EditableData" @bind-Value="@DropEdit">
                            <DropDownListEvents TValue="string" TItem="InplaceEditableModes" ValueChange="@ChangeEditableOn"></DropDownListEvents>
                            <DropDownListFieldSettings Text="text" Value="value"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>Show Buttons</div>
                </td>
                <td>
                    <div>
                        <SfCheckBox Checked="@ShowButtons" LabelPosition="LabelPosition.Before" ValueChange="@OnChange" TChecked="bool"></SfCheckBox>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>Disable</div>
                </td>
                <td>
                    <div>
                        <SfCheckBox LabelPosition="LabelPosition.Before" ValueChange="@OnChangeEnable" TChecked="bool"></SfCheckBox>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
@code {
    private RenderMode Mode = RenderMode.Inline;
    private EditableType EditableOn = EditableType.Click;
    private bool Disabled { get; set; } = false;
    private bool ShowButtons { get; set; } = true;
    private string TextValue = "Andrew";
    private string MaskValue = "012-345-6789";
    private double NumericValue = 100;
    private string DropMode { get; set; } = "Inline";
    private string DropEdit { get; set; } = "Click";
    public class InplaceModes
    {
        public string value { get; set; }
        public string text { get; set; }
    }
    public class InplaceEditableModes
    {
        public string value { get; set; }
        public string text { get; set; }
    }
    private List<InplaceModes> ModeData = new List<InplaceModes>()
{
        new InplaceModes(){ value= "Inline", text= "Inline" },
        new InplaceModes(){ value= "Popup", text= "Popup" }
    };

    private List<InplaceEditableModes> EditableData = new List<InplaceEditableModes>()
{
        new InplaceEditableModes(){ value= "Click", text= "Click" },
        new InplaceEditableModes(){ value= "Double Click", text= "Double Click" },
        new InplaceEditableModes(){ value= "Edit Icon Click", text= "Edit Icon Click" }
    };
    private void ChangeEditMode(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, InplaceModes> args)
    {
        this.Mode = (args.Value.ToString() == "Popup" ? RenderMode.Popup : RenderMode.Inline);
        this.StateHasChanged();
    }
    private void ChangeEditableOn(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, InplaceEditableModes> args)
    {
        if (args.Value != null)
        {
            if (args.Value.ToString() == "Click")
            {
                this.EditableOn = EditableType.Click;
            }
            else if (args.Value.ToString() == "Double Click")
            {
                this.EditableOn = EditableType.DoubleClick;
            }
            else
            {
                this.EditableOn = EditableType.EditIconClick;
            }
            this.StateHasChanged();
        }
    }
    private void OnChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool>
        arg)
    {
        this.ShowButtons = arg.Checked;
        this.StateHasChanged();
    }
    private void OnChangeEnable(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool>
        args)
    {
        this.Disabled = args.Checked;
        this.StateHasChanged();
    }
}
<style>
    .inplace-control-section.default_layout .e-inplaceeditor .e-editable-component .e-clear-icon-hide,
    .e-inplaceeditor-tip .e-editable-component .e-input-group .e-clear-icon.e-clear-icon-hide {
        display: block;
        visibility: hidden;
    }

    .inplace-control-section.default_layout .e-inplaceeditor .e-editable-component .e-clear-icon-hide,
    .e-inplaceeditor-tip .e-editable-component .e-input-group .e-clear-icon.e-clear-icon-hide {
        display: block;
        visibility: hidden;
    }
    /* custom code start */
    .inplace-control-section.default_layout .control_wrapper {
        width: 100%;
        max-width: 400px;
        margin: auto;
    }

        .inplace-control-section.default_layout .control_wrapper table td {
            width: 200px;
            height: 100px;
        }
        /* custom code end */
        .inplace-control-section.default_layout .control_wrapper .control-center {
            text-align: center;
        }

        .inplace-control-section.default_layout .control_wrapper table td .control-label {
            margin-bottom: 0px;
        }

    .inplace-control-section.default_layout .e-inplaceeditor {
        height: auto;
    }

    .property-section table td {
        width: 50%;
    }

    .property-section table div {
        padding-left: 10px;
        padding-top: 10px;
    }

    @@media (max-width: 1200px) {
        .inplace-control-section.default_layout {
            width: 100%;
        }
    }

    @@media (max-width: 768px) {
        .inplace-control-section .control_wrapper table tr td:nth-child(1) {
            width: 130px;
        }

        .inplace-control-section .control_wrapper table tr td:nth-child(2) {
            width: 200px;
        }
    }
</style>
